<template>
    <view class="viewport">
      <!-- 顶部背景 -->
      <view class="navbar" :style="{ paddingTop: safeArea.top + 'px' }">
        <view class="back icon-left" @click="goBack"></view>
        <view class="title">个人信息</view>
      </view>
      <scroll-view scroll-y>
        <!-- 头像 -->
        <view class="avatar" @tap="changeAvatar">
          <image :src="memberProfile.avatar" mode="aspectFill" />
          <text>点击修改头像</text>
        </view>
        <view class="form">
          <view class="form-item">
            <text class="label">账号</text>
            <!-- 账号名不能修改，用 text 组件展示 -->
            <text>{{ memberProfile.account }}</text>
          </view>
          <view class="form-item">
            <text class="label">昵称</text>
            <!-- 输入框通过 v-model 双向绑定修改数据 -->
            <input v-model="memberProfile.nickname" />
          </view>
          <view class="form-item">
            <text class="label">性别</text>
            <radio-group @change="genderChange">
              <label class="radio">
                <radio
                  value="男"
                  color="#27ba9b"
                  :checked="memberProfile.gender === '男'"
                />
                男
              </label>
              <label class="radio">
                <radio
                  value="女"
                  color="#27ba9b"
                  :checked="memberProfile.gender === '女'"
                />
                女
              </label>
            </radio-group>
          </view>
          <view class="form-item">
            <text class="label">出生日期</text>
            <picker
              @change="handleBirthdayChange"
              mode="date"
              start="1900-01-01"
              :end="endTime"
            >
              <view>{{ memberProfile.birthday || "请选择日期" }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">城市</text>
            <picker @change="handleFullLocationChange" mode="region">
              <view>{{ memberProfile.fullLocation || "请选择城市" }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">职业</text>
            <!-- 输入框通过 v-model 双向绑定修改数据 -->
            <input v-model="memberProfile.profession" placeholder="请填写职业" />
          </view>
          <!-- 提交按钮 -->
          <view class="button" @click="handleSubmitForm">保 存</view>
        </view>
      </scroll-view>
    </view>
  </template>

<script>
import { mapState,mapMutations } from "vuex";
import { getMemberProfile,postMemberProfileAvatar ,putMemberProfile} from "@/api/profile";
import dayjs from "dayjs"
export default {
    data(){
        return{
            memberProfile:null
        }
    },
    computed:{
        ...mapState(["safeArea"]),
        ...mapState("user",["userInfo"]), // 用户数据
        // 处理日期  慎重  dayjs
        endTime(){
            // const date = new Date()
            // // 2022-09-02
            // const year = date.getFullYear()

            // let month = date.getMonth() + 1;
            // month = month < 10 ? "0" + month : month;

            // let day = date.getDate();
            // day = day < 10 ? "0" + day : day;

            // // console.log(`${year}-${month}-${day}`);
            // return `${year}-${month}-${day}`;
            return dayjs().format("YYYY-MM-DD")
        }

    },
    // onShow 只要你重新看见了这个页面  就会出触发
    onShow(){
        this.getMemberProfile()
    },
    methods:{
        ...mapMutations("user",["setUserInfo"]),

        // 获取个人信息
        async getMemberProfile(){
            // 想方法传递 token
            const res = await getMemberProfile()
            // console.log(res);
            this.memberProfile = res.result
        },
        // 点击 修改头像
        async changeAvatar(){
            /* 
            1 调用小程序的api wx.chooseMedia(Object object)  来获取选择的头像地址  临时
            2 把临时地址 上传到接口  返回在线地址 
            */
           const [err1,res1] = await uni.chooseMedia({
            count:1, // 同时上传的文件个数
            mediaType:["image"] // 选择的文件类型
           })
            // console.log(err1);
            // console.log(res1);
            // 获取图片的临时地址
           const tempFilePath = res1.tempFiles[0].tempFilePath

           const [err2,res2] = await postMemberProfileAvatar(tempFilePath)
           // 把json字符串转成真正对象
           const data = JSON.parse(res2.data)
           const avatar = data.result.avatar
        //    console.log(avatar);
           this.memberProfile.avatar = avatar // 页面头像更新
        },
        // 性别切换
        genderChange(ev){
            // console.log(ev);
            this.memberProfile.gender = ev.detail.value
        },
        // 选择出生日期
        handleBirthdayChange(ev){
            this.memberProfile.birthday = ev.detail.value
        },
        // 选择 城市信息
        handleFullLocationChange(ev){
            // console.log(ev);
            // 1 获取完整的路径
            this.memberProfile.fullLocation = ev.detail.value.join("");
            // 2 根据接口的要求来获取 省市区编码
            // 省
            this.memberProfile.provinceCode = ev.detail.code[0];
            // 市
            this.memberProfile.cityCode = ev.detail.code[1];
            // 区
            this.memberProfile.countyCode = ev.detail.code[2];

            console.log(this.memberProfile);
        },

        // 保存 提交成功
        async handleSubmitForm(){
            /* 
            1 获取要提交的数据
            2 进行表单的验证
            3 发送 修改的请求
            4 同步去修改 vuex中的 头像和昵称
            5 提示 恭喜用户
            6 延时一会 返回上一页 
             */
            const {
              birthday,
              cityCode,
              countyCode,
              gender,
              nickname,
              profession,
              provinceCode,
            } = this.memberProfile

            // 进行表单的验证  - 在这 忽略
            const params = {
               birthday,
               cityCode,
               countyCode,
               gender,
               nickname,
               profession,
               provinceCode,
             };
            // 发送给后端 完成数据的修改
            const res = await putMemberProfile(params)

            // 同步 实时去修改 vuex中的用户头像和昵称 否则 我的 页面 数据不会更新 userInfo
            const userInfo = {...this.userInfo}
            // const userInfo = this.userInfo ; // 引用类型 直接写等于号 地址的传递 本质上
            // userInfo 和 this.userInfo 同一个地址  修改了 a ，b也会跟着修改

            userInfo.avatar = this.memberProfile.avatar;
            userInfo.nickname = this.memberProfile.nickname

            this.setUserInfo(userInfo) // 触发 mutations

            // 恭喜用户
            uni.showToast({title:"修改成功"})

            // 延时一会 返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
        }
    }
};
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-image: url(https://static.botue.com/erabbit/static/images/order_bg.png);
  background-size: auto 392rpx;
  background-repeat: no-repeat;
}
.navbar {
  .title {
    height: 40px;
    line-height: 32px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
  }
  .back {
    position: absolute;
    left: 20rpx;
    top: 22px;
    font-size: 23px;
    z-index: 9;
    color: #fff;
  }
}
.avatar {
  text-align: center;
  padding: 20rpx 0 40rpx;
  image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
  }
  text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    &:last-child {
      border: none;
    }
    .label {
      width: 180rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    .radio {
      display: inline-block;
      height: 46rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
    radio {
      transform: scale(0.7) translateY(-2px);
    }
    picker {
      flex: 1;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>